<template>
  <div>
    <!-- 顶部 -->
    <mt-header title="原创 · 全部" fixed
      ><router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button slot="right" class="right1"><router-link to="/rankexplain">规则</router-link></mt-button>
    </mt-header>

    <span class="control" @click="showChoice = !showChoice"></span>
    <!-- 分类下拉框 -->
    <div class="updown" v-show="showChoice">
      <span>分类</span>
      <div>
        <ul class="fenlei">
          <li
            @click="now2 = i2"
            :class="{ active2: now2 == i2 }"
            v-for="(x2, i2) in books"
            :key="i2"
          >
            {{ x2 }}
          </li>
        </ul>
      </div>
    </div>

    <div class="ran_content">
      <!-- 左边导航栏 -->
      <div class="left-nav">
        <span
          @click="now = i"
          :class="{ active: now == i }"
          v-for="(x, i) in items"
          :key="i"
          >{{ x }}</span
        >
      </div>
      <!-- 右边导航栏 -->
      <div class="ren_r">
        <div class="jianjie">
          <p class="shuoming">订阅收益排行</p>
          <p class="time">
            <a>昨日</a>
            <a>七天</a>
            <a>30天</a>
          </p>
        </div>
        <div class="items item2">
          <cross-itme /><cross-itme /><cross-itme /><cross-itme /><cross-itme /><cross-itme /><cross-itme /><cross-itme /><cross-itme /><cross-itme />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CrossItme from "@/components/CrossItme.vue";
export default {
  components: { CrossItme },
  data() {
    return {
      now: 0,
      now2: 0,
      showChoice: false,
      items: [
        "热读榜",
        "完结榜",
        "人气榜",
        "新书榜",
        "新人榜",
        "萌新榜",
        "赞赏榜",
        "互动榜",
        "勤奋榜",
        "潜力榜",
        "土豪榜",
        "畅销榜",
      ],
      books: ["科学", "名著", "自然", "古代", "现代", "玄幻", "悬疑", "少儿"],
    };
  },
};
</script>

<style lang="scss" scoped>
.mint-header {
  color: black;
  font-size: inherit;
  background-color: white;
}
.right1 {
  color: #26c2bf;
  font-size: 0.5600149337rem;
}
.left-nav {
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
  span {
    display: inline-block;
    line-height: 3rem;
    width: 20%;
    background-color: rgb(248, 248, 248);
  }
}
.ran_content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 40px;
}
.ren_r {
  width: 80%;
  position: absolute;
  top: 0;
  left: 20%;
  bottom: 0;
}
.jianjie {
  background-color: rgb(248, 248, 248);
  height: 3rem;
  text-align: left;
  vertical-align: middle;
  position: relative;
  z-index: 9;
}
.shuoming {
  line-height: 3rem;
  vertical-align: middle;
  margin-left: 1rem;
}
.time {
  line-height: 3rem;
  vertical-align: middle;
  //   color: #26c2bf;
  //   justify-content: space-between;
  text-align: center;
}
a {
  color: #26c2bf;
  margin: 0 1rem;
}
.active {
  color: #26c2bf;
  background-color: #fff;
  border-left: 5px solid #26c2bf;
}
.active2 {
  color: #fff;
  background-color: #26c2bf;
  //   border-left: 5px solid #26c2bf;
}
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}
.fenlei {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-between;
  padding: 0.45rem 0.9rem;
  li {
    width: 22%;
    border: 1px solid #dddddd;
    margin: 0.45rem 0;
    border-radius: 4px;
  }
}
.updown {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 9;
  span {
    margin-left: 0.9rem;
  }
}
.control {
  display: block;
  position: fixed;
  left: 20%;
  right: 20%;
  width: 60%;
  top: 0;
  height: 40px;
  z-index: 99;
}
</style>
